<script setup lang="ts">
import Header from './components/Header';
import {
  Form as VeeForm,
  Field as VeeField,
  ErrorMessage as VeeErrorMessage
} from 'vee-validate';
import { useCaptcha, useLogin, useVeeValidate } from './composables';
import SliderCaptcha from './components/SliderCaptcha';
import { useRouterStore } from '@/store';
import { useRouter } from 'vue-router';
import QQLogin from './components/QQLogin';
import WXLogin from './components/WXLogin';

const routerStore = useRouterStore();
const router = useRouter();

const { validateUsername, validatePassword, onLoginHandler, loginForm } =
  useVeeValidate();

const { isLoading, onLogin } = useLogin();

const { isSliderCaptchaVisible, captchaEvents } = useCaptcha({
  onLogin,
  loginForm,
  isLoading
});
</script>

<template>
  <div
    class="relative h-screen bg-white text-center xl:bg-zinc-200 dark:bg-zinc-800"
  >
    <Header />
    <div
      class="mt-4 block px-3 py-4 xl:m-auto xl:mt-8 xl:w-[388px] xl:rounded-sm xl:bg-white xl:shadow-xl dark:bg-zinc-800 dark:xl:bg-zinc-900"
    >
      <h3
        class="text-main mb-2 hidden text-base font-semibold xl:block dark:text-zinc-300"
      >
        账号登录
      </h3>
      <VeeForm @submit="onLoginHandler">
        <VeeField
          class="focus:border-b-main w-full border-b border-b-zinc-400 px-1 pb-1 text-base outline-0 dark:bg-zinc-800 dark:text-zinc-400 dark:focus:border-b-zinc-200 xl:dark:bg-zinc-900"
          type="text"
          name="username"
          placeholder="用户名"
          autocomplete="on"
          v-model="loginForm.username"
          :rules="validateUsername"
        />
        <VeeErrorMessage
          name="username"
          class="mt-0.5 block text-left text-sm text-red-600"
        />
        <VeeField
          class="focus:border-b-main w-full border-b border-b-zinc-400 px-1 pb-1 text-base outline-0 dark:bg-zinc-800 dark:text-zinc-400 dark:focus:border-b-zinc-200 xl:dark:bg-zinc-900"
          type="password"
          name="password"
          placeholder="密码"
          autocomplete="on"
          v-model="loginForm.password"
          :rules="validatePassword"
        />
        <VeeErrorMessage
          name="password"
          class="mt-0.5 block text-left text-sm text-red-600"
        />
        <div class="pt-1 pb-3 text-right leading-[0px]">
          <a
            href="#"
            class="inline-block cursor-pointer p-1 text-right text-sm text-zinc-400 duration-300 hover:text-zinc-600 dark:text-zinc-600 dark:hover:text-zinc-400"
            @click.prevent="
              () => {
                routerStore.changeRouterType('push');
                router.push('/register');
              }
            "
          >
            去注册
          </a>
        </div>
        <MButton
          class="w-full dark:bg-zinc-900 xl:dark:bg-zinc-800"
          :isActiveAnimation="false"
          :loading="isLoading"
          @click="
            async () => {
              isSliderCaptchaVisible = true;
            }
          "
        >
          登录
        </MButton>
      </VeeForm>
      <div class="mt-4 flex justify-around">
        <QQLogin />
        <WXLogin />
      </div>
    </div>
    <SliderCaptcha v-show="isSliderCaptchaVisible" v-on="captchaEvents" />
  </div>
</template>
